<template>
  <div>
    <header>
      <el-button type="success" @click="openCreateDrawer" size="small"
        >新增</el-button
      >
    </header>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="编号" width="180" prop="id"></el-table-column>
      <el-table-column
        label="名字"
        width="180"
        prop="permissionName"
      ></el-table-column>

      <el-table-column label="编码" width="180" prop="value"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="openEditDrawer(scope.row, scope.$index)"
            >修改</el-button
          >
          <el-button
            slot="reference"
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改抽屉页面 -->
    <el-drawer
      title="修改权限"
      :visible.sync="editDrawerVisable"
      direction="rtl"
    >
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="名字">
          <el-input v-model="editForm.permissionName" />
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="editForm.value" />
        </el-form-item>
        <el-form-item label="父权限">
          <el-select v-model="editForm.parentId" placeholder="请选择">
            <el-option
              v-for="(item, index) in parentIdOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类型">
          <el-radio-group v-model="editForm.type" size="small">
            <el-radio-button label="目录"></el-radio-button>
            <el-radio-button label="菜单"></el-radio-button>
            <el-radio-button label="按钮"></el-radio-button>
          </el-radio-group>
        </el-form-item>

        <template v-if="editForm.type !== '按钮'">
          <el-form-item label="路由路径">
            <el-input v-model="editForm.path" />
          </el-form-item>
          <el-form-item label="路由名">
            <el-input v-model="editForm.name" />
          </el-form-item>
          <el-form-item v-if="editForm.type !== '目录'" label="路由组件">
            <el-select v-model="editForm.component">
              <el-option
                v-for="(item, index) in componentOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="元数据">
            <el-input v-model="editForm.meta" />
          </el-form-item>
        </template>

        <el-form-item>
          <el-button type="primary" @click="handleEdit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- 新增 抽屉页面 -->
    <el-drawer
      title="新增权限"
      :visible.sync="createDrawerVisable"
      direction="rtl"
    >
      <el-form :model="createForm" label-width="100px">
        <el-form-item label="名字">
          <el-input v-model="createForm.permissionName" />
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="createForm.value" />
        </el-form-item>
        <el-form-item label="父权限">
          <el-select v-model="createForm.parentId" placeholder="请选择">
            <el-option
              v-for="(item, index) in parentIdOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="createForm.type" size="small">
            <el-radio-button label="目录"></el-radio-button>
            <el-radio-button label="菜单"></el-radio-button>
            <el-radio-button label="按钮"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <template v-if="createForm.type !== '按钮'">
          <el-form-item label="路由路径">
            <el-input v-model="createForm.path" />
          </el-form-item>
          <el-form-item label="路由名">
            <el-input v-model="createForm.name" />
          </el-form-item>
          <el-form-item v-if="createForm.type !== '目录'" label="路由组件">
            <el-select v-model="createForm.component">
              <el-option
                v-for="(item, index) in componentOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="标题">
            <el-input v-model="createForm.title" />
          </el-form-item>-->
          <el-form-item label="图标">
            <el-input v-model="createForm.icon" />
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" @click="handleCreate">确定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {
  getPermissions,
  deletePermissions,
  createPermissions,
  updatePermission,
} from '../../api'
import { getViewsAsKeys } from '../../router/modules/dynamicRoutes'
import {
  encodePermissionType,
  decodePermissionType,
} from '../../utils/dataTransform'

export default {
  name: 'Permission',
  data: () => ({
    tableData: [],
    createDrawerVisable: false,
    editDrawerVisable: false,
    parentIdOptions: [],
    componentOptions: getViewsAsKeys(),
    createForm: {
      permissionName: '',
      value: '',
      parentId: 0,
      type: '目录',
      path: '',
      name: '',
      component: '',
      // redirect: '',
      meta: '',
    },
    editForm: {
      id: '',
      permissionName: '',
      value: '',
      parentId: 0,
      type: '目录',
      path: '',
      name: '',
      component: '',
      // redirect: '',
      meta: '',
    },
  }),
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getPermissions().then(res => {
        this.tableData = res.data
      })
    },
    // 新增 点击
    async openCreateDrawer() {
      this.createDrawerVisable = true
      this.parentIdOptions = (await getPermissions()).data
        .map(v => ({
          value: v.id,
          label: v.permissionName,
        }))
        .concat({
          value: 0,
          label: '无',
        })
    },
    // 修改 点击
    async openEditDrawer({ permissionName }, index) {
      console.log(permissionName)
      this.editDrawerVisable = true
      const res = await getPermissions({
        name: permissionName,
      })
      console.log(res)
      this.editForm.id = res.data[index].id
      this.editForm.parentId = res.data[index].parentId
      this.editForm.permissionName = permissionName
      this.editForm.value = res.data[index].value
      this.editForm.path = res.data[index].path
      this.editForm.name = res.data[index].name
      this.editForm.component = res.data[index].component
      this.editForm.redirect = res.data[index].redirect
      this.editForm.meta = res.data[index].meta
      this.editForm.type = decodePermissionType(res.data[index].type)
      this.editDrawerVisable = true

      const permissions = (await getPermissions()).data
        .filter(v => v.id !== res.data[index].id)
        .map(v => ({
          value: v.id,
          label: v.permissionName,
        }))
        .concat({ value: 0, label: '无' })

      this.parentIdOptions = permissions
    },
    handleCreate() {
      const type = encodePermissionType(this.createForm.type)
      // if (type === 0) {
      //   this.createForm.component = 'Layout'
      // }
      this.createForm.type = type
      const data = {
        icon: this.createForm.icon,
        title: this.createForm.permissionName,
      }
      this.createForm.meta = JSON.stringify(data)
      createPermissions(this.createForm).then(res => {
        if (res.code === 200) {
          this.getData()
          this.createDrawerVisable = false
        }
      })
    },
    handleEdit() {
      const type = encodePermissionType(this.editForm.type)
      if (type === 0) {
        this.editForm.component = 'Layout'
      }
      this.editForm.type = type
      updatePermission(this.editForm).then(res => {
        if (res.code === 200) {
          this.getData()
          this.editDrawerVisable = false
        }
      })
    },
    handleDelete(id) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deletePermissions([id]).then(() => {
            this.getData()
          })
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="less" scoped></style>
